 <%var csstpl = {%>
<link href="${basepath}/vendor/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<style>
    	* { outline:none; }
    	li { list-style:none; }
    	.hide { display:none; }
    	.clear { clear:both; margin:0; }
    	a{color: #337ab7!important;text-decoration: none!important;}
    	.content { position:relative; margin-bottom:20px; padding:15px; background:#fff; border: 1px solid #e7eaec; border-radius:3px; }
    	
    	.processer { border:1px solid #eee; margin-bottom:15px; }
    	.processer .contt { position:relative; margin:0 100px; padding:70px 0; }
		.processer .contt > div { position:relative; }
		.processer .line { position:absolute; top:50%; width:100%; border-top:1px dashed #999; }
		.processer .steps { position:absolute; top:-50px; width:140px; margin-left:-70px; text-align:center; border:0px solid #10A64F; }
		.processer .steps p { font:16px/25px "微软雅黑"; }
		.processer .steps b { display:block; width:30px; height:30px; margin:auto; font:16px/30px "微软雅黑"; color:#fff; text-align:center; background:#ddd; border-radius:50%; }
		.processer .steps i { font:13px/35px "微软雅黑"; color:#ccc; }
		.processer .steps.active p { color:#10A64F; }
		.processer .steps.active b { background:#10A64F; }		 
		.processer .steps.step1 { left:0; }
		.processer .steps.step2 { left:33%; }
		.processer .steps.step3 { left:66%; }
		.processer .steps.step4 { left:100%; }
    	
    	.order { margin:15px 0; border: 1px solid #eee; }
    	.order_info { padding:15px; border-right: 1px solid #eee; }
    	.order_opt  { padding:15px; }
    	.order h2 { font:16px/22px "微软雅黑"; color:#444; margin:0 0 15px; }
    	.order ul { padding:0; }
    	.order li { position:relative; padding:5px 0 5px 70px; color:#999; }
    	.order span { position:absolute; left:0; display:block; width:70px; color:#777; text-align:right; }
    	.order p { margin:0; }
    	.order b { font:13px/16px "微软雅黑"; margin-bottom:10px; }
    	.order a { margin-left:8px;}
/*     	.order .btn_express { margin-left:0; }
    	.order .btn { position:absolute; right:20px; bottom:20px; padding:3px 15px; } */
    	
    	table { width:100%; margin-top:15px; }
    	table td2 { padding:20px; background:#f8f8f8; border: 2px solid #fff; vertical-align:top; }
    	table tbody { margin:10px 0; border:1px solid #F8F8F8; }
    	table tbody tr.title { border:1px solid #e7eaec; }
    	table tbody tr.title td { padding:12px; background:#f8f8f8; vertical-align:top; }
    	table tbody tr.sep { height:10px; }
    	table tbody tr.remark { border:1px solid #e7eaec; }
    	table tbody tr.remark td { padding:10px; color:#999; text-align:right; }
    	table tbody tr.remark td b { color:#55BD47; }
    	table tbody tr.info { border:1px solid #e7eaec; background:#F8F8F8; }
    	table tbody tr.info td { padding:10px; }
    	table tbody tr.detail { padding-top:10px; }
    	table tbody tr.detail td { padding:12px; vertical-align:top; border:1px solid #e7eaec; }
    	table tbody tr.detail td b { font-weight:normal; margin-right:8px; }
    	table tbody tr.detail td .btn { font:13px/20px "微软雅黑"; margin-right:5px; padding:3px 20px; background:#ffffff; color:#333; border:1px solid #ddd; }
    	table tbody tr.detail td.td1 img { float:left; width:80px; margin-right:12px; }
    	table tbody tr.detail td.td1 .name { font:14px/1.5em "微软雅黑"; margin-bottom:8px; display:block; }
    	table tbody tr.detail td.td1 p { font:14px/1.5em "微软雅黑"; color:#999; margin:0; }
    	table tbody tr.detail td.td2 { width:10%; text-align:center; }
    	table tbody tr.detail td.td3 { width:10%; text-align:center; }
    	table tbody tr.detail td.td4 { width:10%; text-align:center; }
    	table tbody tr.detail td.td5 { width:10%; text-align:center; }
    	table tbody tr.detail td.td6 { width:10%; text-align:center; }
    	
    	.send_contt { display:none; }
    	.send_panel div.bind { position:relative; padding-left:60px; margin-bottom:10px; }
    	.send_panel div.bind label { position:absolute; left:0; font:14px/35px "微软雅黑"; }
    	.send_panel div.bind input { display:block; width:100%; padding:5px; border:1px solid #e5e5e5; border-radius:3px; font:14px/20px "微软雅黑"; }
    	.send_panel div.bind select { display:block; width:100%; padding:5px; border:1px solid #e5e5e5; border-radius:3px; font:14px/20px "微软雅黑"; }
    	
    	.addr_contt { display:none; }
    	.addr_panel div.bind { position:relative; padding-left:40px; margin-bottom:10px; }
    	.addr_panel div.bind label { position:absolute; left:0; font:14px/35px "微软雅黑"; }
    	.addr_panel div.bind input { display:block; width:100%; padding:5px; border:1px solid #e5e5e5; border-radius:3px; font:14px/20px "微软雅黑"; }
    	.new-info { color:#1ab394; }
</style>
<%};%> <%var jstpl = {%>
<script>
	//$(document).ready(function(){$("#loading-example-btn").click(function(){btn=$(this);simpleLoad(btn,true);simpleLoad(btn,false)})});function simpleLoad(btn,state){if(state){btn.children().addClass("fa-spin");btn.contents().last().replaceWith(" Loading")}else{setTimeout(function(){btn.children().removeClass("fa-spin");btn.contents().last().replaceWith(" Refresh")},2000)}};
function showKd(express_code,express_no){
	gx.iframeindex=layer.open({
	    type: 2,
	    title: "快递查看",
	    shadeClose: true,
        shade: false,
        maxmin: false, 
	    shade: 0.8,
	    area: ['300px','99%'],
	    content: "http://m.kuaidi100.com/index_all.html?type="+express_code+"&postid="+express_no
	}); 
}
	</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script src="${basepath}/vendor/script/Ajax.web.1.0.3.js"></script>
<script src="${basepath}/vendor/script/order.js?v=18"></script>
<%};%> <%layout("../layout/_layout_mall.html",{title:'小金娱',jstpl:jstpl,csstpl:csstpl}){ %>
<!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#SendAddressModal">
  Launch demo modal
</button>-->

<!-- Modal -->
<div class="modal fade" id="SendAddressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  	<form method="post" id="post_address">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">填写退货地址</h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <label for="recipient-name" class="control-label">退货地址:</label>
            <input type="text"  data-rule="required" value="${shop.shop_address!}" class="form-control"  name="address">
          </div>
          
          <div class="form-group">
            <label for="message-text" class="control-label">收件人姓名:</label>
            <input type="text" data-rule="required" value="${shop.shop_name!}"  class="form-control" name="refund_admin_name">
          </div>
          
          <div class="form-group">
            <label for="message-text" class="control-label">收件人电话:</label>
            <input type="text" data-rule="required" value="${shop.shop_tel!}"  class="form-control"  name="refund_admin_phone">
          </div>
          
           <div class="form-group">
            <label for="message-text" class="control-label">备注信息:</label>
            <textarea class="form-control" id="message-text" name="refund_admin_remark"></textarea>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">保存数据</button>
      </div>
    </div>
    </form>
  </div>
</div>

<div class="wrapper wrapper-content animated fadeInUp">
	
	<div class="content">
		<!-- 存储order_id -->
		<input type="hidden" id="orderId" value="${order.id!}">
		<div class="processer">
			<div class="contt">
				<p class="line"></p>
				<div>
					<div class="steps step1 active">
						<p>申请退款</p> <b>1</b><i></i>${refund.createtime!,"yyyy-MM-dd HH:mm:ss"}
					</div>
					<div class="steps step2 active">
						<p>退款处理中</p> <b>2</b><i></i>
					</div>
					<div class="steps step3 ${refund.refund_express_code! != null?'active':''}">
						<p>买家退货给商家</p> <b>3</b><i></i>
					</div>
					<div class="steps step4 " id="refund_state_finsh">
						<p>退款完成</p> <b>4</b>
					</div>
				</div>
			</div>
		</div>
		<div class="order row">
			<div class="order_info col-md-6">
				<h2>退款信息</h2>
				<p>订单编号：${order.id!}</p>
				<p style="margin-top: 10px">商品金额： <code>${item.price!}</code> (不含运费)</p>
				<p style="margin-top: 10px">商品数量： <code>${item.nums!}</code> 件</p>
				<div class="chat-user">
					<img class="chat-avatar" src="${item.image_center!}?imageView2/1/w/200/h/200" alt="">
					<div class="chat-user-name">
						<a href="#">${item.product_name!}</a>
					</div>
				</div>
				<ul>
					<li>
						<span>申请时间：</span>
						<p>${refund.createtime,"yyyy-MM-dd HH:mm:ss"}</p>
					</li>
					<li>
						<span>处理方式：</span>
						<kbd id="remark">${refund.refund_mode==1?'仅退款':'退货退款'}</kbd>
					</li>
					<li>
						<span>收货状态：</span>
						<kbd id="remark">${refund.is_receive_goods==1?'已经收到':'未收到货物'}</kbd>
					</li>
					<li>
						<span>退款总额：</span>
						<p><code>${refund.refund_amount!}</code>${refund.is_add_freight!null==1?'(含运费)':''}</p>
					</li>
					<li>
						<span>退款原因：</span>
						<%if(refund.refund_reason==null || refund.refund_reason==""){%>
							<p>无</p>
						<%}else{%>
							<p>${@AppConst.Refund_Type.get(refund.refund_reason)}</p>
						<%}%>
					</li>
					<li>
						<span>买家昵称：</span>
						<p>${user.nickname!'无'}</p>
					</li>
					<!--<li>
						<span>买家留言：</span>
						<p>${refund.refund_remarks!}</p>
					</li>-->
					<li>
						<span>联系电话：</span>
						<p>${refund.refund_phone!}</p>
					</li>
					<!--<li>
						<span>退货地址：</span>
						<p>${refund.refund_adrr!}</p>
					</li>-->
				</ul>
				
				<div class="team-members">
					<%for(img in refund.img!){%>
					<a href="javascript:gx.photos('退款图片','${img!}')">
						<img alt="member" class="img-circle" src="${img!}?imageView2/1/w/200/h/200">
					</a>
					<%}%>
				</div>
	
				<%if(refund.refund_express_code! != null){%>
				<ul>
					<li>
						<span>退货快递：</span>
						<p>${refund.refund_express_mode!}</p>
					</li>
					<li>
						<span>退货单号：</span>
						<p>${refund.refund_express_code!}<a href="javascript:;" data-id="${order.id}" class="btn btn-sm express_search">查看物流进度</a></p>
					</li>
					<li>
						<span>退货电话：</span>
						<p>${refund.refund_express_phone!}</p>
					</li>
					<li>
						<span> 退货备注：</span>
						<p>${refund.refund_express_remark!}</p>
					</li>
				</ul>
				<%}%>
				
				<div class="team-members">
					<%for(img in refund.express_img!){%>
					<a href="javascript:gx.photos('退货图片','${img!}')">
						<img alt="member" class="img-circle" src="${img!}?imageView2/1/w/200/h/200">
					</a>
					<%}%>
				</div>
			</div>
			<div class="order_opt col-md-6">
				<h2>处理退款</h2>

				<%if(refund.refund_state==1){%>
				<!-- 等待退款 -->
				<div class="alert alert-danger alert-dismissable">
					<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
					${refund.refund_mode! == 2 ? "等待发送退货地址及方式，也可以直接退款！":"等待确认退款 。"}
				</div>
				<button type="button" class="btn btn-w-m btn-danger refund_refuse">拒绝申请</button>
				<button type="button" class="btn btn-success refund_ok">确认退款</button>
					<%if(refund.refund_mode! == 2){%>
					<button type="button" data-toggle="modal" data-target="#SendAddressModal"  class="btn btn-success ">同意退货，发送退货地址</button>
					<%}%> 
				<%}else if(refund.refund_state==3){%>
				<!-- 拒绝退款 -->
				<div class="alert alert-info alert-dismissable">
					已经拒绝退款. <!--你还可以
					<a href="javascript:;" class="btn btn-success refund_ok" style="color: #FFF !important;">同意退款</a>-->
				</div>
				<%}else if(refund.refund_state==4){%>
				<div class="alert alert-success alert-dismissable">
					<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
					买家已经撤销退款
				</div>
				<%}else if(refund.refund_state==5){%>
				<div class="alert alert-success alert-dismissable">
					<kbd>退款完成</kbd>
					，退款金额将原路返回到用户账户！
				</div>
				<%}else if(refund.refund_state==11){%>
				<div class="alert alert-danger alert-dismissable">
					<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
					等待买家退货。
				</div>
				<%}else if(refund.refund_state==12){%>
					<!-- 等待退款 -->
					<div class="alert alert-danger alert-dismissable">
						<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
						买家已将货品邮寄，快递：${refund.refund_express_mode!}，单号：${refund.refund_express_code!}
					</div>
					<button type="button" class="btn btn-w-m btn-danger refund_refuse">拒绝申请</button>
					<%if(refund.refund_mode! == 2){%>
					<button type="button" class="btn btn-success refund_ok">确认退款</button>
					<%}%> 
				<%}%>
			</div>
		</div>

	</div>
</div>

      <!-- 物流查询 -->
<!-- Modal_a -->
     <div class="modal fade" id="myModal_a" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog modal-md" role="document" style="min-width:800px">
           <div class="modal-content">
             <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">物流详情</h4>
             </div>
             <div class="modal-body row">
    	          <table class="table">
	                  <thead>
	                      <tr>
	                          <th width="150px">时间</th>
	                          <th>内容</th>
	                      </tr>
	                  </thead>
	                  <tbody>
	                      <tr>
	                      	<td colspan="2" style="text-align:center"><h2>暂无数据</h2></td>
	                      </tr>
	                  </tbody>
	              </table>
            </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default btn-close" data-dismiss="modal">关闭</button>
            </div>
           </div>
         </div>
   		</div>
<%}%>
<script>

	$(function() {
		$(".express_search").click(function(){
			var order_id = $(this).data("id");
			gx.ajax("/system/order/order_express?order_id="+order_id+"&type=1",function(ret){
				if(ret.state){
					var html = "";
					var content = JSON.parse(ret.data.content);
					if(content.length!=0){
						for(i in content){
							html += "<tr><td>"+content[i].time+"</td><td>"+content[i].context+"</td></tr>"; 
						}
					}else{
						html = "<tr><td colspan='2' style='text-align:center'><h2>暂无数据</h2></td></tr>";
					}
					$("#myModal_a tbody").html(html);
					$('#myModal_a').modal('show');
				}else{
					layer.msg(ret.msg);
				}
			})
		})
		
		var refund_state = "${refund.refund_state!}"
		if (refund_state == "4" || refund_state == "5") {
			$("#refund_state_finsh").addClass("active");
		}
		//拒绝退款
		$(".refund_refuse").click(function() {
			layer.prompt({
				formType : 2,
				title : '请输入拒绝退款原因'
			}, function(value, index, elem) {
				if (value == "") {
					gx.toast("请输入拒绝理由！")
					return;
				}
				gx.ajax("/system/order/refundManage/refund_no?item_id=${item.item_id!}&refund_state=${item.refund_state!}&reason=" + value, function(d) {
					if (d.state) {
						layer.alert("操作成功!");
						window.location.reload();
					} else {
						layer.msg(d.msg);
					}
				}, function(e) {
					//  alert("错了了") 
				})
			});

		})

		//确认退款
		$(".refund_ok").click(function() {
			gx.confirm("你是否确定退款?", function() {
				gx.load("正在提交...");
				gx.ajax("/system/order/refundManage/refund_ok?item_id=${item.item_id!}&refund_state=${item.refund_state!}", function(d) {
					layer.closeAll();
					if (d.state) {
						layer.alert("操作成功!");
						window.location.reload();
					} else {
						layer.msg(d.msg);
					}
				}, function(e) {

				})
			})
		});
		
		$('#post_address').on('valid.form', function(e, form){
		    gx.ajax("/system/order/refundManage/refund_adrr_ok?item_id=${item.item_id!}&id=${refund.id!}&"+$('#post_address').serialize(), function(d) {
				if (d.state) {
					layer.alert("操作成功!");
					window.location.reload();
				} else {
					layer.msg(d.msg);
				}
			});
				
				
		});

		//同意退货申请，发送退货地址
		$(".refund_addr1").click(function() {
			layer.prompt({
				formType : 2,
				title : '发送退货地址',
				value : "${shop.refund_addr!}"
			}, function(value, index, elem) {
				if (value == "") {
					gx.toast("请输入退货地址！")
					return;
				}
				gx.ajax("/system/order/refundManage/refund_adrr_ok?item_id=${item.item_id!}&id=${refund.id!}&adrr=" + value, function(d) {
					if (d.state) {
						layer.alert("操作成功!");
						window.location.reload();
					} else {
						layer.msg(d.msg);
					}
				});
			});
		});

	})
</script>

